<template>
	<view class="u-p-t-40 u-p-r-60 u-p-l-60 u-p-b-30 logincontainer">
		<!-- 用户认证信息 -->
		<u-form class="forms" :model="authModel" ref="form2">
			<u-form-item prop="realName" left-icon="edit-pen-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入真实姓名" v-model="authModel.realName" />
			</u-form-item>
			<u-form-item prop="studentId" left-icon="edit-pen-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入学号" v-model="authModel.studentId" />
			</u-form-item>
			<u-form-item prop="email" left-icon="email-fill" :left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入邮箱" v-model="authModel.email" />
			</u-form-item>

			<!-- 二级学院选择 -->
			<u-form-item prop="college" left-icon="home-fill" :left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<picker mode="selector" :range="colleges" range-key="name" @change="onCollegeChange">
					<view class="uni-input">{{ authModel.college || '请选择二级学院' }}</view>
				</picker>
			</u-form-item>

			<!-- 专业选择 -->
			<u-form-item prop="major" left-icon="bookmark-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<picker mode="selector" :range="majors" range-key="name" @change="onMajorChange">
					<view class="uni-input">{{ authModel.major || '请选择专业' }}</view>
				</picker>
			</u-form-item>

			<!-- 身份证图片上传 -->
			<!-- 					<u-form-item prop="idcardPhoto" left-icon="camera-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<view class="upload-container">
					<u-button @click="uploadIDCard">上传身份证人像面</u-button>
					<image v-if="authModel.idcardPhoto" :src="authModel.idcardPhoto" class="id-card-image" />
				</view>
			</u-form-item> -->

			<!-- 头像上传 -->
			<u-form-item label-width="auto" label="上传身份证:" prop="image">
				<u-upload ref="imgUploadRef" :action="action" :file-list="fileList" @on-change="onChange"
					@on-remove="onRemove" max-count="1"></u-upload>
			</u-form-item>


			<!-- 提交按钮 -->
			<u-button :custom-style="customStyle1" @click="handleSubmit">提交</u-button>
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		registerAuth
	} from "../../api/user_auth.js"
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import http from '../../common/http/http.js'

	// 实名信息数据模型
	const authModel = reactive({
		userId: '', // 绑定的用户 ID
		realName: '', // 真实姓名
		studentId: '', // 学号
		email: '', // 邮箱
		college: '', // 二级学院
		major: '', // 专业
		idcardPhoto: '', // 身份证图片 URL

	});
	// 表单引用
	const form2 = ref(null);

	// 表单验证规则
	const rules = reactive({
		realName: [{
			required: true,
			message: '请输入真实姓名',
			trigger: ['blur', 'change'],
		}, ],
		studentId: [{
				required: true,
				message: '请输入学号',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					if (/^\d{12}$/.test(value)) {
						callback(); // 验证通过
					} else {
						callback(new Error('学号必须为12位数字')); // 验证失败
					}
				},
				trigger: ['blur', 'change'],
			},
		],
		email: [{
				required: true,
				message: '请输入邮箱',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
						callback(); // 验证通过
					} else {
						callback(new Error('请输入有效的邮箱地址')); // 验证失败
					}
				},
				trigger: ['blur', 'change'],
			},
		],
		college: [{
			required: true,
			message: '请选择二级学院',
			trigger: ['change'],
		}, ],
		major: [{
			required: true,
			message: '请选择专业',
			trigger: ['change'],
		}, ],
		idcardPhoto: [{
			required: true,
			message: '请上传身份证图片',
			trigger: ['change'],
		}, ],
	});
	// 自定义样式
	const customStyle1 = reactive({
		marginTop: '40px',
		backgroundColor: '#fd473a',
		color: '#fff',
	});

	// 二级学院和专业数据
	const colleges = reactive([{
			name: '数学与计算机学院',
			majors: ['网络工程', '软件工程', '计算机科学与技术 ', '数据科学与大数据技术 ', '信息与计算科学 '],
		},

		{
			name: '钒钛学院',
			majors: ['新能源科学与工程', '材料科学与工程', '采矿工程', '材料成型及控制工程', '冶金工程', '新能源材料与器件'],
		},
		{
			name: '康养学院',
			majors: ['康复治疗技术', '材料科学与工程', '护理学', '康复治疗学', '健康服务与管理', '护理'],
		},
		{
			name: '生物与化学工程学院',
			majors: ['化学工程与工艺专业', '环境工程', '生物工程', '园艺'],
		},
		{
			name: '艺术学院',
			majors: ['数字媒体艺术', '环境设计', '工艺美术', '产品设计', '雕刻艺术设计', '服装与服饰设计', '视觉传达设计'],
		},
		{
			name: '文学院',
			majors: ['汉语言文学', '秘书学', '学前教育'],
		},
		{
			name: '法学院',
			majors: ['法学', '行政管理', '旅游管理'],
		},
		{
			name: '医学院',
			majors: ['临床医学', '眼视光技术'],
		},
		{
			name: '土木与建筑工程学院',
			majors: ['城乡规划', '工程管理', '智能建造', '建筑学', '土木工程', '测绘工程'],
		}, {
			name: '智能制造学院',
			majors: ['车辆工程', '机器人工程', '机械电子工程', '机械设计制造及其自动化'

			],
		}, {
			name: '经济与管理学院',
			majors: ['财务管理', '国际经济与贸易', '工商管理', '大数据管理与应用', '会计学', '物流管理'],
		},
		{
			name: '外国语学院',
			majors: ['英语专业', '商务英语专业', '翻译专业'],
		},
		{
			name: '其他',
			majors: ['其他'],
		},
	]);

	// 当前选择的专业列表
	const majors = ref([]);

	// 选择二级学院
	const onCollegeChange = (e) => {
		const index = e.detail.value; // 获取选择的二级学院索引
		authModel.college = colleges[index].name; // 更新选中的二级学院
		majors.value = colleges[index].majors.map((name) => ({
			name
		})); // 更新专业列表
		authModel.major = ''; // 清空已选的专业
		// 触发表单验证
		// form2.value.validateField('college');
	};

	// 选择专业
	const onMajorChange = (e) => {
		// 检查是否已选择学院
		if (!authModel.college) {
			uni.showToast({
				title: '请先选择学院', // 提示信息
				icon: 'none',
				duration: 2000
			});
			return;
		}
		const index = e.detail.value; // 获取选择的专业索引

		// 添加防御性检查
		if (majors.value && majors.value.length > 0 && index >= 0 && index < majors.value.length) {
			authModel.major = majors.value[index].name; // 更新选中的专业
			// 触发表单验证
			// form2.value.validateField('major');
		} else {
			console.error('专业索引无效或专业列表为空');
			authModel.major = ''; // 清空选中的专业
		}
	};



	// 上传身份证图片
	// const uploadIDCard = () => {
	// 	uni.chooseImage({
	// 		count: 1,
	// 		success: (res) => {
	// 			const tempFilePath = res.tempFilePaths[0];
	// 			authModel.idcardPhoto = tempFilePath;
	// 			console.log('上传身份证图片', authModel.idcardPhoto);
	// 		},
	// 	});
	// };



	const imgUploadRef = ref()
	const fileList = ref([])
	const action = ref(http.baseUrl + "/api/upload/image")
	// 使用空数组存储图片路径,然后用push存入
	const imageUrls = ref([])
	// 图片上传触发
	const onChange = (e) => {
		// console.log("onChange",e)
		// onChange {statusCode: 200, data: "{"msg":"upload success","code":200,"data":"/develop/image/f72ecdd8-b204-43e9-9a81-0703cca22361.png"}", header: {…}, cookies: Array(0), errMsg: "uploadFile:ok"}cookies: []data: "{"msg":"upload success","code":200,"data":"/develop/image/f72ecdd8-b204-43e9-9a81-0703cca22361.png"}"errMsg: "uploadFile:ok"header: {Content-Type: "application/json", Transfer-Encoding: "chunked", Date: "Mon, 17 Mar 2025 01:51:58 GMT", Keep-Alive: "timeout=60", Connection: "keep-alive"}statusCode: 200__proto__: Object
		// console.log(e.data.data)
		// undefined 直接访问 e.data.data 得不到结果，因为 e.data 是一个字符串，而不是对象。
		// console.log(e.data)
		// {"msg":"upload success","code":200,"data":"/develop/image/b69590b5-3e79-482e-a859-b0a716ab8a2b.png"}
		// 使用 JSON.parse() 将 JSON 格式的字符串转换为 JavaScript 对象后，才能访问其中的属性。
		let imgRes = JSON.parse(e.data)
		// console.log(imgRes.data)
		// /develop/image/50b12d56-814a-4762-ac53-21e464644136.png
		// 将图片路径存入数组
		// console.log(http.baseUrl)
		imageUrls.value.push(http.baseUrl + imgRes.data)
		// 把数组中的图片转换为逗号分隔的字符串
		// http://localhost:8089
		let url = ""
		for (let i = 0; i < imageUrls.value.length; i++) {
			url = url + imageUrls.value[i] + ","
		}
		// console.log(url)
		// http://localhost:8089/develop/image/afcddf95-c801-4c60-8f6a-f019b025b6e7.jpg,http://localhost:8089/develop/image/4d71931d-c24e-4680-bc70-0ced02e9000a.jpg,http://localhost:8089/develop/image/88ae2346-fa2c-45eb-b2b0-4766bfb4887a.jpg,
		// 去掉最后一个逗号
		authModel.idcardPhoto = url.substring(0, url.length - 1)
		console.log(authModel)
		console.log('上传的身份证图片路径:', authModel.idcardPhoto);

	}
	// 图片移除
	const onRemove = (index) => {
		// console.log(index)
		imageUrls.value.splice(index, 1)
		let url = ""
		for (let i = 0; i < imageUrls.value.length; i++) {
			url = url + imageUrls.value[i] + ","
		}
		// 去掉最后一个逗号
		formData.avatar = url.substring(0, url.length - 1)
		console.log(formData)

	}





	// 提交实名信息
	const handleSubmit = () => {
		form2.value.validate(async (valid) => {
			if (valid) {
				try {
					// 👇 手动校验上传图片是否为空
					if (!authModel.idcardPhoto) {
						uni.showToast({
							title: '请上传身份证图片',
							icon: 'none',
						});
						return;
					}
					// 提交实名认证信息
					// 模拟从本地存储获取 userId
					authModel.userId = uni.getStorageSync('userId');
					console.log('提交的实名认证信息:', authModel);
					let res = await registerAuth(authModel);
					if (res.code == 200) {
						uni.showToast({
							title: '实名信息提交成功',
							icon: 'success',
						});

						// 认证成功后跳转
						uni.switchTab({
							url: '/pages/index/index',
						});
					} else {
						uni.showToast({
							title: res.message || '提交失败',
							icon: 'none',
						});
					}
				} catch (error) {
					console.error('提交失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none',
					});
				}
			} else {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none',
				});
			}
		});
	};


	// 在 onReady 生命周期中设置验证规则
	onReady(() => {
		form2.value.setRules(rules);
	});
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.forms {
			width: 100%;
		}

		.upload-container {
			display: flex;
			align-items: center;

			.id-card-image {
				width: 100px;
				height: 60px;
				margin-left: 20px;
				border-radius: 8px;
			}
		}

		.uni-input {
			color: #333;
			font-size: 16px;
		}
	}
</style>